<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        body, html {
            width: 100%;
            height: 100%;
        }

        #l-map {
            height: 800px;
            width: 100%;
        }

        #r-result {
            width: 100%;
        }
    </style>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=IYrcBQaaLVKXdIFjrMCAs7mOm3RcmrEI"></script>
    <title>推荐近地铁</title>
</head>
<body>
<jsp:include page="/WEB-INF/jsp/include/header2.jsp"/>
<div id="l-map"></div>
<div id="r-result">
    <button id="statusBtn" onclick="nextAddress()">下一条<%--（//todo 拖动点进行修复）--%></button>
    <span id="info">

    </span>
</div>
</body>
</html>
<script type="text/javascript">

    var map = new BMap.Map("l-map");
    map.enableScrollWheelZoom(true);
    map.centerAndZoom("上海", 12);                   // 初始化地图,设置城市和地图级别。


    var data = ${data};
    var index = 0;

    function nextAddress() {
        map.clearOverlays();

        var curData = data[index++];

        $("#info").html(index + ":" + curData.address)

        console.info(curData);

        var point = new BMap.Point(curData.lng, curData.lat);
        map.centerAndZoom(point, 13);

        var circle = new BMap.Circle(point, 2000, {strokeColor: "blue", strokeWeight: 1, strokeOpacity: 0.1}); //创建圆
        map.addOverlay(circle);            //增加圆

        var marker = new BMap.Marker(point);  // 创建标注
        map.addOverlay(marker);               // 将标注添加到地图中
        marker.setAnimation(BMAP_ANIMATION_BOUNCE); // 跳动的动画
//        marker.setAnimation(BMAP_ANIMATION_DROP); // 坠落动画

        $.get("/real/find_better_metro?lng=" + curData.lng + "&lat=" + curData.lat, function (date) {
            console.info(date)

            for (var index in date) {
                point = new BMap.Point(date[index].lng, date[index].lat);
                var myIcon = new BMap.Icon("http://api.map.baidu.com/library/CurveLine/1.5/src/circle.png", new BMap.Size(20, 20));
                var marker = new BMap.Marker(point, {icon: myIcon});  // 创建标注
//                var marker = new BMap.Marker(point);  // 创建标注
                map.addOverlay(marker);               // 将标注添加到地图中
            }

        })


    }


</script>
